<template>
    <basic-container>
        <avue-crud ref="crud" :option="option" :page.sync="page" :table-loading="listLoading"
                   :data="list"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @refresh-change="refreshChange">

            <template slot="menu" slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-view"
                           @click="handleDetail(scope.row)">详情
                </el-button>
                <el-button type="text" size="mini" icon="el-icon-s-flag"
                           v-show="scope.row.shipStatus === '1'"
                           @click="handleComplete(scope.row)">去发货
                </el-button>
                <el-button type="text" size="mini" icon="el-icon-edit"
                           v-show="scope.row.shipStatus !== '1'"
                           @click="handleModify(scope.row)">编辑
                </el-button>
            </template>
            <template slot-scope="scope" slot="shipTimeSearch">
                <el-date-picker
                        v-model="shipDate"
                        type="daterange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </template>
        </avue-crud>
    </basic-container>

</template>

<script>
    import {fetchList} from '../../api/opc/ship_record'
    import {tableOption} from '../../const/crud/opc/ship_record'

    export default {
        name: 'ship_record',
        data() {
            return {
                option: tableOption,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20, // 每页显示多少条,
                    isAsc: false// 是否倒序
                },
                list: [],
                listLoading: true,
                shipDate: []
            }
        },
        computed: {
            searchForm() {
                return this.$refs.crud.searchForm;
            }
        },
        mounted() {
            this.getHeight();
            let queryParams = this.$route.query.res;
            if(queryParams){
                this.searchForm.orderSn = queryParams.orderSn;
            }
            this.getList(this.page, this.searchForm);
        },
        methods: {
            getHeight() {
                let tableHeight = Math.max(window.innerHeight - 430, 300);
                this.option.maxHeight = tableHeight + 'px';
            },
            getList(page, params={}) {
                this.listLoading = true;
                if (this.shipDate.length > 1) {
                    params.startDate = this.shipDate[0];
                    params.endDate = this.shipDate[1];
                }
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params)).then(response => {
                    this.list = response.data.data.records
                    this.page.total = response.data.data.total
                    this.listLoading = false
                })
            },
            handleDetail(row) {
                let query = {
                    res: {
                        shipRecordSn: row.shipRecordSn
                    }
                };
                this.$router.push({path: '/shipRecord/shipDetail', query: query})
            },
            handleComplete(row){
                let query = {
                    res: {
                        shipRecordSn: row.shipRecordSn
                    }
                };
                this.$router.push({path: '/shipRecord/completeShip', query: query})
            },
            handleModify: function (row) {
                let query = {res: {
                        shipRecordSn: row.shipRecordSn
                    }};
                this.$router.push({path: '/shipRecord/modifyShip', query: query})
            },
            /**
             * 搜索回调
             */
            searchChange(form, done) {
                this.getList(this.page, form);
                done();
            },
            /**
             * 刷新回调
             */
            refreshChange() {
                this.getList(this.page, this.filterForm(this.searchForm));
            },
            searchReset() {
                this.shipDate = [];
            }
        }
    }
</script>

